<template>
    <div>
        <el-card class="box-card">
            <div class="body">
                <div class="text-box">
                    <h1 style="font-size: 30px;line-height: 37px;font-weight: 400;color: #606266">{{ storeObj.shopname }}</h1>
                    <el-rate
                        v-model="storeObj.score"
                        disabled
                        show-score
                        text-color="#606266"
                        score-template="{value}分"
                        style="line-height: 20px;margin: 10px 0 17px 0">
                    </el-rate>
                    <el-divider class="divider"></el-divider>
                    <div style="">
                        <p class="text">
                            地址:{{storeObj.shopAddress}}
                            <i class="el-icon-location" style="color: #409EFF"></i>
                        </p>
                        <p class="text">电话:{{storeObj.phone}}</p>
                    </div>
                    <el-divider class="divider"></el-divider>
                    <ul style="list-style-type: none">
                        <li style="margin-right: 30px;text-align: center;height: 85px">
                            <i class="bi bi-rss-fill" style="font-size: 2.4rem;width: 1em;color: #1BB192;"></i>
                            <p style="line-height: 30px;color: #909399;">提供WiFi</p>
                        </li>
                        <li style="margin-right: 30px;text-align: center;height: 85px">
                            <i class="bi bi-p-square-fill" style="font-size: 2.4rem;width: 1em;color: #449FDF;"></i>
                            <p style="line-height: 30px;color: #909399;">停车位</p>
                        </li>
                    </ul>
                </div>
                <div class="img_box">
                    <img :src="storeObj.shoppicture" class="image">
                </div>
            </div>
        </el-card>
        <el-divider></el-divider>
        <h1 style="text-indent: 1em">菜品</h1>
        <br>
        <el-card  :body-style="{position:'relative'}" style="height: 600.25px">
            <el-tabs tab-position="left" style="max-height: 500px;height: 500px">
                <el-tab-pane
                    v-for="type in typeList"
                    class="left"
                    :label="type.type">
                    <StoreList
                        ref="list"
                        :sid="storeObj.sid"
                        :type="type.id"
                        :key="type.id"
                        @goodCar="showCar"/>
                </el-tab-pane>
            </el-tabs>
            <el-card
                v-if="isOpen"
                class="list-box"
                >
                <div slot="header" style="text-align: right;float: right">
                    <el-button class="btuH" @click="clearAll">
                        <i class="bi bi-trash3"></i>清空所有
                    </el-button>
                </div>
                <div v-for="dish in goodList" style="margin-bottom: 5px;">
                    <el-row style="position: relative;height: 104px">
                        <el-col :span="6" style="text-align: center">
                            <el-image :src="dish.picture" style="height: 100px;width: 100px" fit="fit"></el-image>

                        </el-col>
                        <el-col :span="6">
                            <div style="text-align: left">
                                <h1
                                    style="font-weight: 600;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;"
                                    :title="dish.name">
                                    {{dish.name | ellipsisTitle}}
                                </h1>
                                <div class="pdiv">
                                    <p>口味:{{dish.taste}}</p>
                                    <p>
                                        {{dish.price}}元
                                        <span style="font-size: 15px">×1</span>
                                    </p>
                                </div>
                            </div>
                        </el-col>
                        <el-col :span="4" style="height: 100px;position: relative">
                            <p style="position: absolute;left: 20%;bottom: 0;vertical-align: bottom;color: #909399">单品总价:{{dish.quantity*dish.price}}</p>
                        </el-col>
                        <el-col :span="8" style="height: 100px;position: relative">
                            <el-input-number size="small"
                                             v-model="dish.quantity"
                                             :min="0"
                                             @change="(currentValue, oldValue)=>changeValue(currentValue, oldValue,dish)"
                                             style=""
                                             class="input">
                            </el-input-number>
                        </el-col>
                    </el-row>
                    <el-divider></el-divider>
                </div>
            </el-card>
            <el-card :body-style="{padding:'5px'}" class="goodCard" style="border-radius: 40px;">
                <el-row>
                    <el-col :span="12">
                        <el-button @click="openClose" id="openBtu">
                            <i class="bi bi-cart-fill" style="font-size: 2rem"></i>
                        </el-button>
                        <span style="font-size: 20px;font-weight: 500;line-height: 50px;color: white">
                            <span style="font-size: 26px;font-weight: bold">￥</span>
                            {{allMoney}}
                        </span>
                    </el-col>
                    <el-col :span="12" style="text-align: right">

                        <el-button class="btu" @click="goPay" round>
                            去下单
                            <i class="bi bi-arrow-right"></i>
                        </el-button>
                    </el-col>
                </el-row>
            </el-card>
        </el-card>
    </div>
</template>

<script>
    import storeSearch from "@/api/storeSearch";
    import StoreList from "@/views/StoreList.vue";
    export default {
        inject:['reload'],
        components: {StoreList},
        data(){
            return{
                storeObj: {},
                dish:[],
                goodList:[],
                isOpen:false,
                drawer:false,
                allMoney: 0,
                typeList:[]
            }
        },
        methods:{
            getStore(){
                var obj = decodeURIComponent(this.$route.params.id);
                this.storeObj = JSON.parse(obj);
                console.log(this.storeObj,123123123)
                storeSearch.findType(this.storeObj.sid).then(response=>{
                    // console.log(response.data.data)
                    this.typeList = response.data.data
                    console.log(this.typeList)
                    var first = {id:0,type:'全部'}
                    this.typeList.unshift(first);
                    console.log(this.typeList)
                })
            },
            showCar(showList){
                this.goodList = showList;
                this.allMoney = 0;
                for (const good of this.goodList) {
                    this.allMoney +=good.quantity*good.price;
                }
                if(this.isOpen === true){
                    this.isOpen = false;
                    this.isOpen = true;
                }
            },
            openClose(){
                this.isOpen = this.isOpen === false;
            },
            changeValue(currentValue, oldValue,dish){
                var index = this.goodList.findIndex(function (list){
                    return dish.id === list.id
                });
                if (currentValue>oldValue){
                    this.goodList[index] = dish
                }else{
                    if (this.goodList[index].quantity !== 0){
                        this.goodList[index] = dish;
                    }
                }
                this.typeList.forEach((item,index)=>{
                    this.$refs.list[index].listFa(this.goodList)
                })

                if(this.isOpen === true){
                    this.isOpen = false;
                    this.isOpen = true
                }

            },
            clearAll(){
                this.goodList.length=0;
                this.typeList.forEach((item,index)=>{
                    this.$refs.list[index].listFa(this.goodList)
                })
                this.isOpen = false;
            },
            goPay(){
                var One = JSON.stringify(this.goodList)
                this.$router.push('/dishone/'+encodeURIComponent(One))
            }
        },
        created() {
            this.getStore();
        },
        watch: {
            $route:{
                // immediate:true,
                handler(){
                    this.reload();
                }
            }
        },
        filters:{
            ellipsisTitle(value) {
                if (!value) return "";
                if (value.length > 15) {
                    // 截取长度
                    return value.slice(0, 15) + "...";
                }
                return value;
            }
        },
    }
</script>

<style scoped>
.box-card{
    padding: 20px 20px 33px 20px;
    overflow: auto;
}
.box-card ::v-deep .el-card__body{
    padding:0 !important;
    position:relative !important;
}
.text-box{
    width: 70%;
    text-align: left;
    float: left
}
.img_box{
    float: left;
    width: 30%;
}
.image{
    border-radius: 4px;
    height: 100%;
    width: 100%;
}
.el-rate>>>.el-rate__icon{
    font-size: 21px !important;
    margin-right: 0 !important;
}
.el-rate>>>.el-rate__text{
    font-size: 15px;
    vertical-align: middle;
    margin-left: 6px;
}
.text-box>.el-divider--horizontal{
    margin: 5px 0 20px 0;
    width: 95%;
}
.text{
    font-size: 16px;
    line-height: 25px;
    margin: 10px;
    color: #909399;
}
ul>li{
    float: left;
}
.goodCard{
    margin: 0 20px 10px 20px;
    background-color: #545C64;
    width: 80%;
    float: right;
}
.list-box{
    position: absolute;
    z-index: 15;
    bottom: 20px;
    left: 262px;
    width: 72.8%;
    max-height: 300px;
    overflow: auto;
}
.pdiv{
    position:absolute;
    bottom:0;
    line-height: 25px;
    font-size: 17px;
    color: #909399;
}
.el-divider--horizontal{
    margin: 10px auto !important;
    width: 90% !important;
}
#openBtu{
    background-color:transparent;
    border: transparent;
    margin-left: 10px;
    color: #ffc300;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-property: transform;
    transition-property: transform;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
}
#openBtu:hover{
    -webkit-transform: translateY(-8px);
    transform: translateY(-8px);
    color: #ffc300;
}
#openBtu:focus{
    color: #ffc300;
}
.btu{
    background-color: #ffc300;
    color: #545C64;
    border: #ffc300;
    //float: right;
    display: inline-block;
    margin: 10px 20px;
}
.btu:hover,.btu:focus{
    background-color: #ffc300;
    color: #545C64;
}
.list-box>>>.el-card__header{
    padding: 5px 20px !important;
    border: transparent;
}
.btuH{
    background-color: transparent;
    color: #545C64;
    border: transparent;
    padding: 12px 20px 0 20px;
}
.btuH:hover,.btuH:focus{
    background-color: transparent;
    color: #545C64;
}
.input{
    border: transparent;
    position: absolute;
    bottom: 0;
    right: 20%;
    color: #545C64;
}
.input>>>.el-input-number__increase, .input>>>.el-input-number__decrease{
    border-radius: 30px !important;
    background-color: #ffc300 !important;
}
.input>>>.el-input__inner{
    border: 0px !important;
}
::v-deep .el-tabs__header{
    width: 10%;
}
::v-deep .el-tabs__item.is-left{
    font-size: 20px;
    height: 50px;
}
</style>